<template>
  <view class="rechargeRecord">
    <view class="header">
      <view class="timeList flex flex-align flex-line">
        <view class="timeBtn active">全部</view>
        <view class="timeBtn">昨日</view>
        <view class="timeBtn">今日</view>
        <view class="timeBtn">近7天</view>
        <view class="timeBtn">自定义</view>
      </view>
      <view style="height: 130rpx;"></view>
    </view>
    <view class="rechargeList">
      <view class="list flex flex-align flex-bt boxshadow" v-for="(item,index) in 10" :key="index">
        <view class="listTitle">
          <view class="title">微信充值</view>
          <view class="time">2022/08/21 21:34</view>
        </view>
        <view class="listPrice">+¥50.00</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.rechargeRecord{padding:0rpx 30rpx 20rpx;}

.timeList{position: fixed;top:0;left:0;width: 100%;background: #F5F6F7;z-index: 100;padding: 30rpx 30rpx 20rpx;
  .timeBtn{
    color: #969799;font-size: 24rpx;border: 1px solid #fff;border-radius: 64rpx;padding: 8rpx 30rpx 12rpx;margin-right: 20rpx;background: #fff;
    margin-bottom: 20rpx;
  }
  .timeBtn:last-child{margin-right: 0;}
  .timeBtn.active{color: #fff;border: 1px solid #FE7431;background:#FE7431 ;}
}
.rechargeList{
  .list{border-radius: 16rpx;
    padding:40rpx 30rpx;background: #fff;margin-bottom:20rpx;
    .listTitle{
      .title{color: #323233;font-size: 28rpx;font-weight: 600;}
      .time{color: #969799;font-size: 24rpx;margin-top: 10rpx;}
    }
   .listPrice{color: #FE7431;font-size: 36rpx;font-weight: 600;}
  }
}
</style>